<template>
  <div>
    <div class="content">
      <div class="oh">
        <div class="fl w65 today-data">
          <div class="index-title">今日数据</div>
          <div class="order">
            <div class="w25 fl first">
              <div class="t">今天新的维修单</div>
              <div class="m">
                <div class="c">1</div>
              </div>
              <div class="b">
                <div><span class="type">DEF_1</span> <span class="number">0</span></div>
                <div><span class="type">DEF_2</span> <span class="number">0</span></div>
                <div><span class="type">IMD</span> <span class="number">0</span></div>
              </div>
            </div>
            <div class="w25 fl second">
              <div class="t">延迟的工单</div>
              <div class="m">
                <div class="c">1</div>
              </div>
              <div class="b">
                <div><span class="type">PM</span> <span class="number">0</span></div>
                <div><span class="type">CM</span> <span class="number">0</span></div>
                <div><span class="type">INSP</span> <span class="number">0</span></div>
              </div>
            </div>
            <div class="w25 fl third">
              <div class="t">备件采购种类</div>
              <div class="m">
                <div class="c">100</div>
              </div>
              <div class="b">
                <div class="tc">润滑油</div>
                <div class="tc">螺丝钉</div>
                <div class="tc">空气开关</div>
              </div>
            </div>
            <div class="w25 fl fourth">
              <div class="t">当月缺乏备件次数</div>
              <div class="m">
                <div class="c">1</div>
              </div>
              <div class="b">
                <div class="tc">10号</div>
                <div class="tc">12号</div>
              </div>
            </div>
          </div>
        </div>
        <div class="fl w35 mouth-kpi">
          <div class="index-title">月度指标</div>
          <div class="b">
            <div class="box">
              <div class="r">
                <el-progress type="circle" :percentage="80" :stroke-width="strokeWidth" />
                <p>预防性保养完成率</p>
              </div>
            </div>
            <div class="box">
              <div class="r">
                <el-progress type="circle" :percentage="40" :stroke-width="strokeWidth" color="#28d4ac" />
                <p>生产损失</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="oh mt10">
        <div class="fl w65 ">
          <div class="fl w45 doing-order">
            <div class="index-title">执行中的工单 <a href="">更多 >></a></div>
            <div class="b">
              <el-table
                :data="orderingList"
                stripe
                :header-cell-style="{background:'#e1e1e1',color:'#000'}"
                style="width: 100%"
              >
                <el-table-column
                  align="center"
                  prop="coding"
                  label="工单号"
                  min-width="25%"
                />
                <el-table-column
                  align="center"
                  prop="equipment"
                  label="设备资产"
                  min-width="25%"
                />
                <el-table-column
                  align="center"
                  prop="name"
                  label="名称"
                  min-width="25%"
                />
                <el-table-column
                  align="center"
                  prop="already"
                  label="已安排"
                  min-width="25%"
                />
              </el-table>
            </div>
          </div>
          <div class="fl w55 top-five">
            <div class="index-title">备件使用率top5</div>
            <div id="echarts1" />
          </div>
        </div>
        <div class="fl w35 charts">
          <div class="parts">
            <div class="index-title">备件总值</div>
            <div id="echarts2" />
          </div>
          <div class="parts part-year">
            <div class="index-title">半年重大故障措施完成趋势</div>
            <div id="echarts3" />
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      中国设备管理协会汽车智能制造技术中心 @2020-2021
    </div>
  </div>
</template>

<script>
const echarts = require('echarts')
import { mapGetters } from 'vuex'

export default {
  name: 'Index',
  data() {
    return {
      strokeWidth: 15,
      orderingList: [
        {
          'coding': 'order1',
          'equipment': '设备1',
          'name': '维修单1',
          'already': '08:00'
        },
        {
          'coding': 'order1',
          'equipment': '设备1',
          'name': '维修单1',
          'already': '08:00'
        },
        {
          'coding': 'order1',
          'equipment': '设备1',
          'name': '维修单1',
          'already': '08:00'
        },
        {
          'coding': 'order1',
          'equipment': '设备1',
          'name': '维修单1',
          'already': '08:00'
        },
        {
          'coding': 'order1',
          'equipment': '设备1',
          'name': '维修单1',
          'already': '08:00'
        },
        {
          'coding': 'order1',
          'equipment': '设备1',
          'name': '维修单1',
          'already': '08:00'
        },
        {
          'coding': 'order1',
          'equipment': '设备1',
          'name': '维修单1',
          'already': '08:00'
        },
        {
          'coding': 'order1',
          'equipment': '设备1',
          'name': '维修单1',
          'already': '08:00'
        },
        {
          'coding': 'order1',
          'equipment': '设备1',
          'name': '维修单1',
          'already': '08:00'
        },
        {
          'coding': 'order1',
          'equipment': '设备1',
          'name': '维修单1',
          'already': '08:00'
        }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {},
  mounted() {
    /* ECharts图表 */
    const myChart1 = echarts.init(document.getElementById('echarts1'))
    myChart1.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        left: 'center',
        top: 'bottom',
        data: ['扩展单元', '断路器', '空气开关', '交流接触器', '小型断路器']
      },
      series: [
        {
          name: '使用率',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: 335, name: '扩展单元' },
            { value: 310, name: '断路器' },
            { value: 234, name: '空气开关' },
            { value: 135, name: '交流接触器' },
            { value: 154, name: '小型断路器' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          color: ['#28d4ac', '#8f87ff', '#ff717d', '#ffa427', '#5c95fe']
        }
      ]
    })

    const myChart2 = echarts.init(document.getElementById('echarts2'))
    myChart2.setOption({
      legend: {},
      tooltip: {},
      dataset: {
        source: [
          ['product', '库存', '常用', '呆滞'],
          ['一工厂', 2000, 1500, 500],
          ['二工厂', 3000, 2800, 200],
          ['三工厂', 4000, 3600, 400],
          ['发动机厂', 5000, 4300, 700],
          ['中央库', 3000, 2500, 500]
        ]
      },
      xAxis: { type: 'category' },
      yAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [
        { type: 'bar' },
        { type: 'bar' },
        { type: 'bar' }
      ],
      color: ['#5c95fe', '#ff717d', '#28d4ac']
    })

    const myChart3 = echarts.init(document.getElementById('echarts3'))
    myChart3.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        data: ['完成项', '措施']
      },
      xAxis: [
        {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '次数',
          min: 0,
          max: 50,
          interval: 10,
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          type: 'value',
          name: '项',
          min: 0,
          max: 50,
          interval: 10,
          axisLabel: {
            formatter: '{value}'
          }
        }
      ],
      series: [
        {
          name: '完成项',
          type: 'bar',
          data: [12, 34, 43, 33, 22, 29]
        },
        {
          name: '措施',
          type: 'line',
          yAxisIndex: 1,
          data: [10, 33, 41, 22, 11, 20]
        }
      ],
      color: ['#ff717d', '#5c95fe']
    })
  }
}
</script>

<style>
.fl{
  float: left;}
.oh{
  overflow: hidden;
}
.mt10{
  margin-top: 10px;
}
.content{
  background: #f1f2fa;
  box-sizing: border-box;
  padding: 10px;
  overflow: hidden;
}
.content .w65{width: 65%;}

.content .today-data{
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
}
.content .index-title{
  font-size: 20px;
  border-left: 5px solid #5b92b1;
  padding-left: 14px;
  margin-bottom: 5px;
}
.content .index-title a{
  font-size: 12px;
  color:#5c5c5c;
  float: right;
  line-height: 28px;
}
.content .today-data .order{
  width: 96%;
  margin: 20px auto;
}
.content .today-data .order .t{
  text-align: center;
  font-size: 20px;
}
.content .today-data .order .m .c{
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  margin: 20px auto;
  font-size: 38px;
  color: #fff;
  text-align: center;
}
.content .today-data .order .w25.first .c{
  background: #5c95fe;
}
.content .today-data .order .w25.second .c{
  background: #28d4ac;
}
.content .today-data .order .w25.third .c{
  background: #8d87ff;
}
.content .today-data .order .w25.fourth .c{
  background: #ff717d;
}
.content .today-data .order .b{
  width: 80%;
  height: 100%;
  margin:0 auto;
  box-sizing: border-box;
  padding: 10px;
}
.content .today-data .order .b div{
  width: 60%;
  margin: 0 auto 10px;
  font-weight: bold;
  overflow: hidden;
}
.content .today-data .order .b div .type{
  width:80%;
  float: left;
  display: block;
}
.content .today-data .order .b div .number{
  width:20%;
  float: left;
  display: block;
  color: #3f9dfe;
  text-align: center;
}
.content .mouth-kpi{
  height: 332px;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
  border-left: 10px solid #f1f2fa;
}
.content .mouth-kpi .b .box{
  width: 50%;
  overflow: hidden;
  margin-top: 60px;
  float: left;
}
.content .mouth-kpi .b .box .r{
  width: 80%;
  margin:0 auto;
  text-align: center;
}
.content .mouth-kpi .b .box .r p{

}
.content .doing-order{
  height: 466px;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
}
.content .doing-order .b{
  margin-top: 10px;
}
.content .doing-order .b .el-table__header th{
  padding: 0;
  height: 36px;
  line-height: 36px;
}
.content .doing-order .b .el-table__body tr{
  padding: 0;
  height: 36px;
  line-height: 36px;
}
.content .top-five{
  height: 466px;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
  border-left: 10px solid #f1f2fa;
}
.content .top-five #echarts1{
  margin-top: -130px;
}
.content .charts{

  box-sizing: border-box;
  border-left: 10px solid #f1f2fa;
}
.content .part-year{
  margin-top:10px;
}
.content .charts .parts{
  background: #fff;
  padding: 10px;
}
.content .w25{width: 25%;}
.content .w35{width: 35%;}
.content .w45{width: 45%;}
.content .w55{width: 55%;}
.content .w30{width: 30%;}
.content .w20{width: 17%;}
.content .w40{width: 40%;}
.content .w33{width: 33%;}
.content .order-box{
  height: 160px;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 5px;
}
.content .order-box .l{
  width:33%;
  height: 100%;
  float: left;
  border-right: 1px solid #000;
  text-align: center;
  position: relative;
}
.content .order-box .l img{
  width:50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
}
.content .order-box .r{
  width: 66%;
  float: left;
  box-sizing: border-box;
  padding: 10px;
}
.content .order-box .r .tt{
  font-weight: bold;
  text-align: center;
}
.content .order-box .r .bb{
  overflow: hidden;
  height: 100px;
}
.content .order-box.new .ll{
  width: 20%;
  height: 100%;
  line-height: 100px;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  float: left;
}
.content .order-box.new .rr{
  width: 80%;
  height: 100%;
  float: left;
  box-sizing: border-box;
  padding: 10px;
}
.content .order-box.new .rr div{
  width: 100%;
  margin-bottom: 10px;
  font-weight: bold;
}
.content .order-box.new .rr div .type{
  width:80%;
  float: left;
  display: block;
}
.content .order-box.new .rr div .number{
  color: #3f9dfe;
}
.content .order-box.buyKind .bb{
  line-height: 100px;
  text-align: center;
}
.content .order-box.buyKind .bb .number{
  color: #3f9dfe;
  font-weight: bold;
  font-size: 40px;
}
.content .order-box.oldOrder .bb{
  width: 80%;
  height: 100%;
  margin:0 auto;
  box-sizing: border-box;
  padding: 10px;
}
.content .order-box.oldOrder .bb div{
  width: 100%;
  margin-bottom: 10px;
  font-weight: bold;
  overflow: hidden;
}
.content .order-box.oldOrder .bb div .type{
  width:80%;
  float: left;
  display: block;
}
.content .order-box.oldOrder .bb div .number{
  width:20%;
  float: left;
  display: block;
  color: #3f9dfe;
  text-align: center;
}
.content .ordering,.content .kpi{
  height: 330px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
}
.content .ordering .t,.content .kpi .t{
  height: 40px;
  line-height: 40px;
  background: #d9dddd;
  box-sizing: border-box;
  padding-left: 16px;
  font-weight: bold;
}
.content .kpi .b .box{
  height: 108px;
  overflow: hidden;
  margin: 20px 0;
}
.content .kpi .b .box .l{
  width: 33%;
  height: 100%;
  float: left;
  border-right: 1px solid #000;
  position: relative;
}
.content .kpi .b .box .l img{
  width: 50px;
  height: 50px;
  position: absolute;
  top:50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
}
.content .kpi .b .box .r{
  width: 66%;
  float: left;
}
.content .kpi .b .box .r .tt{
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
}
.content .kpi .b .box .r .bb{
  height: 78px;
  line-height: 78px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}
.content .eachart-title{
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
.echarts1,.echarts2,.echarts3{
  width: 100%;
  height: 360px;
  background: #fff;
  border-radius: 10px;
  padding-top: 15px;
  box-sizing: border-box;
}
#echarts1{
  width: 100%;
  height: 500px;
}
#echarts2,#echarts3{
  width: 100%;
  height: 180px;
}
.content .echarts1 #echarts1{
  margin-top: -20px;
}
.footer{
  width: 100%;
  text-align: center;
  padding: 20px 0;
  text-decoration: underline;
}
</style>
